<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none;
        }

        h1 {
            width: 200px;
            height: 50px;
            margin: 0 150px;
        }

        .input {
            width: 200px;
            height: 40px;
            margin: 0 10px 0 100px;
        }

        .add {
            height: 45px;
            background-color: white;
        }

        .content {
            width: 500px;
            border: 1px solid #000;
            position: relative;
        }

        li>button {
            position: absolute;
            right: 20px;
        }

        .title {
            margin: 10px;
            display: flex;
            justify-items: center;
        }

        .title>div {
            margin: 10px;
        }
    </style>
</head>

<body>
    <h1>待办事项</h1>
    <input class="input" type="text" placeholder="添加新事项"><button class="add" onclick="add()">添加事项</button>
    <div class="title">
        <div>查看所有事项</div>
        <div>查看已完成事项</div>
        <div>查看未完成事项</div>
        <button onclick="clear_arr()">清除所有事项</button>
    </div>
    <div class="content">
        <h2>事项列表</h2>
        <ul>

        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        //所有数据
        var arr = []

        //渲染
        function fn(a) {
            $(".content>ul").html(``)
            a.forEach(item => {
                $(".content>ul").append(`
                <li>
                    <input type="checkbox" onclick="dd(${item.id})">
                    <span>${item.name}</span>
                    <button onclick="del(${item.id})">删除</button>
                </li>
                <hr>`)
            })
        }

        //添加
        function add() {
            arr.push({
                name: $("input").val(),
                id: arr.length,
                is: false
            })
            fn(arr)
        }

        //删除
        function del(id) {
            var index = arr.findIndex(item => item.id == id)
            arr.splice(index, 1)
            fn(arr)
        }


      

        //已完成数据
        var right = []
        var allright = []

        //未完成的数据
        var left = []
        var alllfeft = []

        function dd(id) {
            arr.forEach(item => {
                if (item.id == id) {
                    item.is = !item.is
                }
                if(item.is){
                    right.push(item)
                }
            });
            right.forEach(item=>{
                if(!allright.includes(item)){
                    allright.push(item)
                }
            })
            $(".title>div").eq(1).on("click",()=>{
                fn(allright)
            })            
        }

        arr.forEach(item=>{
            if(!item.is){
                left.push(item)
            }
        })

        left.forEach(item=>{
            if(!alllfeft.includes(item)){
                    alllfeft.push(item)
                }
        })

        $(".title>div").eq(0).on("click",()=>{
            fn(arr)
        })

        $(".title>div").eq(2).on("click",()=>{
            fn(alllfeft)
        })
        
        //清空所有事项
        function clear_arr() {
            arr.splice(0, arr.length)
            alllfeft.splice(0, alllfeft.length)
            allright.splice(0, allright.length)
            fn(arr)
            fn(alllfeft)
            fn(allright)
        }

    </script>
</body>

</html>